<!-- DEPRECATED, plase use @datawrapper/controls instead -->
<ControlGroup width="{width}" valign="{valign}" label="{label}">
    <select bind:value="selected" style="width: calc(100% - 50px)">
        {#if $visualization && $visualization.axes[axis].optional}
        <option value="-">{axis['na-label']||'--'}</option>
        {/if} {#each columns as column}
        <option value="{column.name}">{column.name}</option>
        {/each}
    </select>
</ControlGroup>

<style>
    .control-label {
        vertical-align: middle !important;
        margin-bottom: 0 !important;
    }
    .controls.form-inline {
        vertical-align: middle !important;
    }
</style>

<script>
    import _indexOf from 'underscore-es/indexOf';
    import _clone from 'underscore-es/clone';

    import ControlGroup from './ControlGroup.html';

    export default {
        components: { ControlGroup },
        data() {
            return {
                selected: false,
                width: '200px',
                valign: 'baseline'
            };
        },
        computed: {
            columns({ axis, $visualization, $dataset }) {
                const columns = [];
                // const axisMeta =
                if (!$dataset || !$visualization || !axis) return [];
                $dataset.eachColumn(column => {
                    if (_indexOf($visualization.axes[axis].accepts, column.type()) > -1) {
                        columns.push({
                            name: column.name()
                        });
                    }
                });
                return columns;
            }
        },
        oncreate() {
            this.store.observe('visualization', visualization => {
                if (!this.get) return;
                const state = this.get();
                if (!state) return;

                // initialize if state is not yet set
                if (!state.selected && visualization) {
                    const selected = this.store.getMetadata('axes', {})[this.get().axis];
                    this.set({ selected });
                }
            });
        },
        onstate({ changed, current }) {
            if (changed.selected) {
                if (current.selected) {
                    const { axis } = this.get();
                    var axes = _clone(this.store.getMetadata('axes', {}));
                    if (current.selected === '-') delete axes[axis];
                    else axes[axis] = current.selected;
                    this.store.setMetadata('axes', axes);
                }
            }
        }
    };
</script>
